<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <!-- 头部内容 -->
      <div class="top-content">
        <div class="top-name">{{ typeName }}单</div>
        <div class="top-stock" @click="goRecord">{{ typeName }}记录</div>
      </div>
      <div class="btns">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchForm"
          class="form"
        >
          <el-form-item label="">
            <el-cascader
              v-model="searchForm.companyId"
              placeholder="请选择公司名称"
              :options="companyArray"
              :popper-append-to-body="false"
              :props="{
                checkStrictly: true,
                value: 'id',
                label: 'name',
                children: 'childList',
              }"
              @change="changeTreeItem"
              clearable
            ></el-cascader>
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="searchForm.baseId"
              placeholder="请选择基地名称"
              :popper-append-to-body="false"
              clearable
              @change="baseChange"
            >
              <el-option
                v-for="item in baseArray"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button class="el-icon-s-home" @click="back()"></el-button>
      </div>
      <div class="nx-content">
        <div class="search-box">
          <el-form
            :inline="true"
            ref="formName"
            :model="ruleForm"
            class="demo-form-inline form-head"
          >
            <el-form-item label="入库单号"
              ><el-input
                v-model="ruleForm.code"
                placeholder=""
                readonly
              ></el-input
            ></el-form-item>
            <el-form-item label="出入库类型">
              <el-input
                v-model="ruleForm.typeName"
                placeholder=""
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="供应商编码">
              <el-input
                v-model="ruleForm.cvenCode"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="装鱼日期">
              <el-date-picker
                v-model="ruleForm.workInDate"
                type="date"
                :editable="false"
                placeholder="请选择"
                align="right"
                :picker-options="pickerOptions"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="卸鱼日期">
              <el-date-picker
                v-model="ruleForm.workOutDate"
                type="date"
                :editable="false"
                placeholder="请选择"
                align="right"
                :picker-options="pickerOptions"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="单兵" label-width="10.1rem">
              <el-select
                v-model="ruleForm.workInUser"
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in soldiersArray"
                  :key="item.id"
                  :label="item.soldierName"
                  :value="item.soldierName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="车辆" label-width="10.1rem">
              <el-select
                v-model="ruleForm.carNumber"
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
                @change="carChange"
              >
                <el-option
                  v-for="item in carsArray"
                  :key="item.id"
                  :label="item.carNumber"
                  :value="item.carNumber"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="司机" label-width="8.3rem">
              <el-select
                v-model="ruleForm.carUser"
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in carUsersArray"
                  :key="item.id"
                  :label="item.carUser"
                  :value="item.carUser"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="到达地" label-width="8.3rem">
              <el-select
                v-model="ruleForm.addressArrival"
                placeholder="请选择"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in addresssArray"
                  :key="item.id"
                  :label="item.address"
                  :value="item.address"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" label-width="10.1rem">
              <el-input
                v-model="ruleForm.remark"
                placeholder="请输入"
                class="remark"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="center-box">
          <div class="center-title">&nbsp;鱼类相关信息</div>
          <div class="right">
            <el-button class="btn" type="primary" @click="handleAdd"
              >新增</el-button
            >
          </div>
        </div>
        <div class="center-content">
          <NxTablePad
            :table-cols="tableCols"
            :table-data="tableData"
            :pagInationIf="false"
            :height="'30.6rem'"
            :isIndex="true"
            class="table-wrap"
          >
            <template slot="sex" slot-scope="scope">
              <span v-if="scope.row.sex == 0">未鉴定</span>
              <span v-if="scope.row.sex == 1">雄</span>
              <span v-if="scope.row.sex == 2">雌</span>
            </template>
            <template slot="operation" slot-scope="scope">
              <span
                @click="handleEdit(scope.row)"
                style="font-size: 1.86rem"
                class="nx-btn nx-edit"
                >编辑</span
              >
              <span
                @click="handleDelete(scope.row)"
                style="font-size: 1.86rem"
                class="nx-btn nx-del"
                >删除</span
              >
            </template>
          </NxTablePad>
        </div>
        <div class="bottom-content">
          <div class="left">
            <div>条数合计：{{ calcNum }}</div>
            <div>重量合计：{{ calcWeight }}</div>
            <div>金额合计：</div>
          </div>
          <div class="right">
            <el-button
              class="btn-light-blue btn"
              :disabled="tableData.length == 0"
              @click="submitForm('formName')"
              >确 认</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <AddFishType
      :addEditId="addEditId"
      :addEditStatus="addEditStatus"
      :addFishTypeIsDialog="addFishTypeIsDialog"
      :companyId="companyId"
      :baseId="baseId"
      @backData="getBackData"
      :stockInOrderId="stockInOrderId"
    ></AddFishType>
  </div>
</template>
<script>
import { isFullscreen } from '@/utils/fullscreen'
import NxTablePad from '@/components/NxTablePad.vue'
import AddFishType from './components/addFishType.vue'
import { getSysCompanyBases } from '@/api/system'
import { getCompanyInfoTree } from '@/api/company'
import {
  getDataStockInOrderDetailPads,
  delDataStockInOrderDetail,
  saveStockInOrderPad,
} from '@/api/godown'
import {
  getObjSoldiers,
  getObjAddresss,
  getObjCars,
  getObjCarDrivers,
} from '@/api/breeding'
export default {
  components: {
    AddFishType,
    NxTablePad,
  },
  data() {
    return {
      searchForm: {
        companyId: '',
        baseId: '',
      },
      ruleForm: {
        companyId: '',
        baseId: '',
        id: '',
        type: 0,
        code: '',
        addressArrival: '',
        cvenCode: '',
        carNumber: '',
        carUser: '',
        remark: '',
        typeName: '',
        workInDate: '',
        workInUser: '',
        workOutDate: '',
        workOutUser: '',
      },
      tableCols: [
        {
          label: '鱼池编码',
          prop: 'fishpondCode',
          align: 'center',
        },
        {
          label: '鱼池名称',
          prop: 'fishpondName',
          align: 'center',
        },
        {
          label: '鱼名',
          prop: 'fishName',
          align: 'center',
        },
        {
          label: '鱼编码',
          prop: 'fishCode',
          align: 'center',
        },
        {
          label: '批次编码',
          prop: 'batchCode',
          align: 'center',
        },
        {
          label: '性别',
          slot: 'sex',
          align: 'center',
        },
        {
          label: '卵径',
          prop: 'diameter',
          align: 'center',
        },
        {
          label: '条数',
          prop: 'num',
          align: 'center',
        },
        {
          label: '初重',
          prop: 'weightPrime',
          align: 'center',
        },
        {
          label: '均重',
          prop: 'weightAve',
          align: 'center',
        },
        {
          label: '总重',
          prop: 'weight',
          align: 'center',
        },
        {
          label: '单价',
          prop: 'iprice',
          align: 'center',
        },
        {
          label: '金额',
          prop: 'isum',
          align: 'center',
        },
        {
          label: '原采购价',
          prop: 'reiprice',
          align: 'center',
        },
        {
          label: '原采购金额',
          prop: 'reisum',
          align: 'center',
          width: '90',
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: '200',
          fixed: 'right',
        },
      ],
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      companyArray: [], // 公司集合
      baseArray: [], // 基地集合
      companyId: '', // 公司id
      baseId: '', // 基地id
      typeName: '',
      stockInOrderId: '', // 入库单id
      calcWeight: 0, // 计算重量
      calcNum: 0, //计算数量
      addEditId: '', // 添加编辑rowid
      addEditStatus: 'add',
      addFishTypeIsDialog: false,
      fishpondArray: [],
      soldiersArray: [], // 单兵集合
      addresssArray: [], // 地址集合
      carsArray: [], // 车辆集合
      carUsersArray: [], // 司机集合
    }
  },
  mounted() {
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.ruleForm.type = this.$route.query.type
    this.typeName = this.$route.query.name
    if (this.ruleForm.type != 2) {
      this.ruleForm.typeName = this.typeName
    }

    this.getCompanyInfoTree()

    if (!isFullscreen()) {
      let ele = document.body
      if (ele.requestFullscreen) {
        ele.requestFullscreen()
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen()
      } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen()
      } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen()
      }
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.push({
        path: `/workbench/workbench`,
      })
    },
    // 权限管理
    getCompanyInfoTree() {
      if (!this.searchForm.userType) {
        return
      }

      if (this.searchForm.userType == 0) {
        // 超级管理员，公司只有一个总公司
        this.companyArray = [
          {
            id: 0,
            name: '总公司',
            parentId: 0,
          },
        ]
      } else {
        getCompanyInfoTree({ id: 0 }).then((res) => {
          if (res.code == 200) {
            this.companyArray = res.data
            if (res.data.length > 0) {
              this.searchForm.companyId = res.data[0].id
              this.companyId = this.searchForm.companyId + ''
              this.getSysCompanyBases()
            }
          }
        })
      }
    },
    changeTreeItem(val) {
      if (val) {
        this.searchForm.companyId = val[val.length - 1]
        this.companyId = val[val.length - 1] + ''
      } else {
        this.searchForm.companyId = ''
        this.companyId = ''
      }

      this.searchForm.baseId = ''
      this.baseId = ''
      this.baseArray = []

      // 获取基地列表
      this.getSysCompanyBases()
    },
    getSysCompanyBases() {
      if (
        this.searchForm.companyId === '' ||
        this.searchForm.companyId == null
      ) {
        return
      }
      getSysCompanyBases({ id: this.searchForm.companyId }).then((res) => {
        if (res.code == 200) {
          this.baseArray = res.data
          if (res.data.length > 0) {
            this.searchForm.baseId = res.data[0].id
            this.baseId = this.searchForm.baseId + ''

            this.getObjSoldiers()
            this.getObjAddresss()
            this.getObjCars()
            this.getDetail()
          }
        }
      })
    },
    // 基地下拉切换
    baseChange(val) {
      if (val) {
        this.searchForm.baseId = val
        this.baseId = val + ''
      } else {
        this.searchForm.baseId = ''
        this.baseId = ''
      }

      this.soldiersArray = []

      this.getObjSoldiers()
      this.getDetail()
    },
    // 详情
    getDetail() {
      getDataStockInOrderDetailPads({
        stockInOrderId: this.stockInOrderId,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data
          this.tableData.forEach((item) => {
            this.calcNum += item.num
            this.calcWeight += item.weight
          })
        }
      })
    },
    // 删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delDataStockInOrderDetail({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.getDetail()
            }
          })
        })
        .catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveStockInOrderPad(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })

              // 确认后重置
              this.resetForm()
            }
          })
        }
      })
    },
    // 确认后重置
    resetForm() {
      this.ruleForm = {
        companyId: '',
        baseId: '',
        id: '',
        type: 0,
        code: '',
        addressArrival: '',
        cvenCode: '',
        carNumber: '',
        carUser: '',
        remark: '',
        typeName: '',
        workInDate: '',
        workInUser: '',
        workOutDate: '',
        workOutUser: '',
      }
      this.tableData = []

      this.ruleForm.type = this.$route.query.type
      this.typeName = this.$route.query.name
      if (this.ruleForm.type != 2) {
        this.ruleForm.typeName = this.typeName
      }
    },
    // 点击鱼池信息后改变颜色
    handleAdd() {
      this.addEditId = ''
      this.addEditStatus = 'add'
      this.addFishTypeIsDialog = true
    },
    // 编辑
    handleEdit(row) {
      this.addEditId = row.id + ''
      this.addEditStatus = 'edit'
      this.addFishTypeIsDialog = true
    },
    // 弹窗关闭
    closeAddEdit() {
      this.addFishTypeIsDialog = false
    },
    // 跳转到入库记录
    goRecord() {
      this.$router.push({
        path: '/stockIn/record',
        query: {
          companyId: this.searchForm.companyId,
          baseId: this.searchForm.baseId,
          typeName: this.typeName,
          type: this.$route.query.type,
        },
      })
    },
    // 返回信息
    getBackData(data) {
      this.stockInOrderId = data.stockInOrderId
      this.ruleForm.id = data.stockInOrderId
      this.ruleForm.companyId = this.companyId
      this.ruleForm.baseId = this.baseId
      this.ruleForm.code = data.code
    },
    // 获取单兵列表
    getObjSoldiers() {
      if (this.searchForm.baseId === '' || this.searchForm.baseId == null) {
        return
      }
      getObjSoldiers({ id: this.searchForm.baseId }).then((res) => {
        if (res.code == 200) {
          this.soldiersArray = res.data
        }
      })
    },
    // 获取地址列表
    getObjAddresss() {
      getObjAddresss().then((res) => {
        if (res.code == 200) {
          this.addresssArray = res.data
        }
      })
    },
    // 获取车辆列表
    getObjCars() {
      getObjCars().then((res) => {
        if (res.code == 200) {
          this.carsArray = res.data
        }
      })
    },
    // 类型切换
    carChange(val) {
      this.ruleForm.carUser = ''
      this.carUsersArray = []

      let obj = this.carsArray.find((item) => {
        return item.carNumber == val + ''
      })
      this.getObjCarDrivers(obj.id)
    },
    // 获取车辆司机列表
    getObjCarDrivers(id) {
      if (this.ruleForm.carNumber === '' || this.ruleForm.carNumber == null) {
        return
      }

      getObjCarDrivers({ id: id }).then((res) => {
        if (res.code == 200) {
          this.carUsersArray = res.data
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.btns {
  width: 97%;
  height: 3.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border: 1px solid red;
  /deep/.el-button {
    font-size: 2.5rem;
  }
  .form {
    /deep/.el-form-item__content {
      width: 23rem;
    }
    /deep/.el-form-item {
      margin-bottom: 0;
    }
    /* selecte 框的高度设置，默认是 40px*/
    /deep/ .el-input__inner {
      height: 4.5rem;
      width: 23rem;
      font-size: 2.16rem;
    }
    ::v-deep .el-select-dropdown__item {
      font-size: 2.16rem;
      height: 5.028571rem;
      line-height: 5.028571rem;
    }
    ::v-deep .el-input--small .el-input__inner {
      height: 4rem;
      width: 10rem !important;
      font-size: 1.3rem;
      text-align: center;
      padding: 0;
    }
  }
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .top-content {
      width: 95%;
      height: 5rem;
      margin-bottom: 2rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: '宋体';
      position: relative;
      // border: 1px solid red;
      position: relative;

      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }

      .top-stock {
        width: fit-content;
        height: 3rem;
        position: absolute;
        right: 30rem;
        margin-left: 5.71rem;
        margin-top: 1rem;
        text-decoration: underline;
        font-size: 1.86rem;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .nx-content {
      width: 95% !important;
      height: 57rem !important;
      background-color: #ffffff;
      border-radius: 0.43rem;
      display: flex;
      flex-direction: column;
      .search-box {
        border-radius: 0.5rem;
        width: 100%;
        height: 28%;
        border: 0.2rem solid #e4eaee;
        .form-head {
          height: 100%;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          text-align: center;
          /deep/.el-form-item__content {
            width: 21rem !important;
            line-height: 2.957143rem;
            font-size: 2.16rem;
          }
          /deep/.el-input__inner {
            width: 21.64rem;
            height: 4.35rem;
          }
          /deep/ .el-form-item__label {
            font-size: 1.86rem;
            line-height: 4.1rem;
          }
          /deep/.el-form-item {
            margin-top: 0.371429rem;
            margin-bottom: 0.371429rem;
          }
          /deep/.el-input {
            font-size: 2.06rem !important;
          }
          /deep/.el-input__icon {
            line-height: 4.557143rem;
          }
          ::v-deep .el-date-picker.has-sidebar {
            width: 41.285714rem !important;
          }
          ::v-deep .el-select-dropdown__empty {
            padding: 0.814286rem 3.3rem;
            font-size: 2.16rem;
          }
          ::v-deep .el-select-dropdown__list {
            .el-select-dropdown__item {
              font-size: 2.16rem;
              height: 4.428571rem;
              line-height: 4.428571rem;
            }
          }
          .remark {
            /deep/.el-input__inner {
              width: 85.74rem;
              height: 4.35rem;
            }
          }
        }
      }
      .center-box {
        margin-top: 0.6rem;
        display: flex;
        width: 100%;
        justify-content: space-between;
        .center-title {
          display: flex;
          align-items: center;
          font-size: 2.16rem;
          font-family: MicrosoftYaHei;
          border-left: 0.4rem solid #00c187;
          color: #22262e;
        }
        .btn {
          width: 6.65rem;
          height: 2.38rem;
          font-size: 2.16rem;
        }
        .right {
          display: flex;
          justify-content: center;
          align-items: center;

          .el-button--primary {
            color: #fff;
            background-color: #0067c7;
            border-color: #0067c7;
          }
        }
      }
      .center-content {
        margin-top: 1rem;
        width: 100%;
        height: 52%;
        border: 0.2rem solid #e4eaee;
        padding-bottom: 1rem;
        border-bottom: 0.2rem solid #ebeff1;
      }
      .bottom-content {
        display: flex;
        justify-content: space-between;
        margin-top: 0.4rem;
        // border: 1px solid red;
        .left {
          width: 45%;
          display: flex;
          justify-content: space-between;
          line-height: 4.48rem;
          font-size: 1.86rem;
        }
        .right {
          .btn {
            width: 6.65rem;
            height: 2.38rem;
            font-size: 2.16rem;
          }
        }
      }
    }
  }
}
</style>
